<template>
  <div class="box1">
    <div class="history">
      <div class="data">2019-3-26</div>
      <div class="msg">
        <div>
          <p><span>12</span>人</p>
          <p>今日订餐人数</p>
        </div>
        <span></span>
        <div>
          <p><span>186.2</span>元</p>
          <p>今日订餐总价</p>
        </div>
        <span></span>
        <div>
          <p><span>78</span>人</p>
          <p>本周订餐人数</p>
        </div>
        <span></span>
        <div>
          <p><span>786.6</span>元</p>
          <p>本周订餐总价</p>
        </div>
      </div>
      <h5>查看历史订单></h5>
    </div>
    <div class="meal">
      <div class="day">今日套餐</div>
      <div class="msg">
        <div>
          <p>套餐A</p>
          <p><span>鱼香肉丝</span><span>蚂蚁上树</span></p>
          <p><span>青菜肉团</span><span>糖醋排骨</span></p>
        </div>
        <div>
          <p>套餐A</p>
          <p><span>鱼香肉丝</span><span>蚂蚁上树</span></p>
          <p><span>青菜肉团</span><span>糖醋排骨</span></p>
        </div>
        <div>
          <p>套餐A</p>
          <p><span>鱼香肉丝</span><span>蚂蚁上树</span></p>
          <p><span>青菜肉团</span><span>糖醋排骨</span></p>
        </div>
        <div>
          <p>套餐A</p>
          <p><span>鱼香肉丝</span><span>蚂蚁上树</span></p>
          <p><span>青菜肉团</span><span>糖醋排骨</span></p>
        </div>
      </div>
      <h5 >菜品管理</h5>
    </div>
    <div class="detail">
      <el-table :data="userList" border  style="width: 1100px">
        <el-table-column prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="订餐人" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180">
        </el-table-column>
        <el-table-column prop="meal" label="所选套餐"> </el-table-column>
      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next" :total="total"  @current-change="onchangeSize">
    </el-pagination>
  </div>
</template>

<script>
import { orderignsGet,orderignsTotal } from '@/api/orderingsApi'
export default {
  async mounted() {
    // 获取总记录数
    let total = await orderignsTotal()
    this.total = total.data
    this.loadData()
  },
  data() {
    return {
      userList:[],
      total:0
    };
  },
  methods:{
    
    async loadData(page = 1) {
      let ret = await orderignsGet(page)
       this.userList = ret.backMsg.usermsg
      if (ret.backMsg.usermsg.length > 0) {
       
      } else {
        this.$message.error('没有更多的数据了')
      }
    },
    onchangeSize(page) {
      this.loadData(page)
    },
  }
  
  
  
};
</script>

<style lang="scss" scoped>

.box1 {
  display: flex;
  flex-direction: column;
  >.el-pagination{
    display: block;
    margin-top: 200px;
    margin-left: 300px;
  }
  > .history {
    position: relative;
    left: 29px;
    top: 96px;
    width: 1100px;
    height: 172px;
    background-color: rgba(228, 228, 228, 0.8);
    z-index: 2;
    > .msg {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      > span {
        border-right: solid 1px #fff;
        height: 50px;
      }
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        > p > span {
          font-weight: 700;
          font-size: 30px;
        }
      }
    }
    > h5 {
      position: absolute;
      top: 10px;
      right: 30px;
      color: #63b9be;
      font-size: 14px;
      cursor: pointer;
    }
    > .data {
      width: 121px;
      height: 31px;
      background-color: rgba(204, 0, 0, 0.807843137254902);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(204, 0, 0, 1);
      border-radius: 3px;
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      position: absolute;
      top: -15px;
      left: 15px;
      line-height: 31px;
    }
  }
  > .meal {
    position: relative;
    left: 29px;
    top: 139px;
    width: 1100px;
    height: 172px;
    z-index: 2;
    background-color: rgba(228, 228, 228, 0.8);
    > .msg {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      > div {
        width: 146px;
        height: 104px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
    }
    > .day {
      width: 121px;
      height: 31px;
      background-color: rgba(204, 0, 0, 0.807843137254902);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(204, 0, 0, 1);
      border-radius: 3px;
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      position: absolute;
      top: -15px;
      left: 15px;
      line-height: 31px;
    }
    > h5 {
      position: absolute;
      top: 10px;
      right: 30px;
      color: #63b9be;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .detail {
    position: relative;
    top: 150px;
    left: 29px;
    z-index: 2;
  }
}
</style>